<template>
  <div class=detail-header v-show="isShow">
    旅游详情
  </div>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const isShow = ref(false)

function onScroll() {
  const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
  // 当页面滚动到超过 200px 时显示
  isShow.value = scrollTop >= 500
}

onMounted(() => {
  window.addEventListener('scroll', onScroll)
})

onUnmounted(() => {
  window.removeEventListener('scroll', onScroll)
})
</script>
<style lang="scss" scoped>
.detail-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: $headerHeight;
  background-color: $bgColor;
  color: #fff;
  line-height: $headerHeight;
  text-align: center;
  font-size: $titleFontSize;
  font-weight: bold;
  transition: all 0.3s;
}
</style>
